<template>
	<view>
		<!-- 空白页 -->
		<wanl-empty text="没有找到任何领养记录" v-if="petList.length == 0" />
		<view class="main"v-else>
			<!-- <text class="fw" style=" display: block; margin: 3vw; font-size: 4.26vw;">领养记录:</text> -->
			<view style="display: flex;flex-direction: column;align-items: center;">
				<view class="card" @tap="toDetails(item.pet_id)"
					style="width: 96vw;box-shadow: 0 0 0 0.2vw #eee ;background:#fff;border-radius:20rpx;" v-for="(item,index) in petList">
					<view class="top" style="display: flex; justify-content: space-between; align-items:center;">
						<text class="names">领养人: {{item.user_name}}</text>
						<view :style="{ background: changeColor(item),color: '#fff',padding: '12rpx 30rpx',borderRadius:'8rpx',maxHeight:'60rpx'}" >{{item.audit_status_text}}</view>
					</view>
					<view class="main" style="display: flex;">
						<image style="width: 40vw;height: 40vh;border-radius:8rpx;" :src="$wanlshop.oss($wanlshop.oss(item.pet.pet_avatar))"
							mode="widthFix">
						</image>
						<view class="right"
							style=" line-height: 7vw; display: flex;flex-direction: column;margin-left: 5vw;">
							<text class="">宠物基本信息：</text>
							<view class="main" style="display: flex;flex-direction: column;justify-content: space-evenly;">
								<text class="block ">名字：{{item.pet.pet_name}}</text>
								<text class="block ">性别：{{item.pet.pet_sex_text}}</text>
								<text class="block ">健康状态：{{item.pet.pet_fertility_text}}</text>
								<view class="span" style="display: flex;margin-top:10px;">
									<view class="center"
										style="height: 7vw; font-size: 26rpx;padding: 0 3vw;border-radius: 8rpx;background:#ececec;color:#8B4513;border:1rpx solid #8B4513;">
										{{item.pet.pet_drug_text}}
									</view>
									<view class="center"
										style="height: 7vw;font-size: 26rpx;padding: 0 3vw;border-radius: 8rpx;background:#ececec;margin-left:6px;color:#8B4513;border:1rpx solid #8B4513;">
										{{item.pet.pet_vaccine_text}}
									</view>
									<!-- 								<view>{{item.pet.pet_drug_text}}</view>
									<view>{{item.pet.pet_vaccine_text}}</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	

		<wanl-empty v-else text="暂无领养记录"></wanl-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				petList: []
			}
		},
		
		onLoad() {
			this.loadData()
		},
		methods: {
			changeColor(item) {
				const audit_status = item.audit_status
				let text 
				if(audit_status == 1){
				   text = '#FD7601'
				} else if (audit_status == 2) {
					text = 'gray'
				} else if (audit_status == 0) {
					text = '#8B4513'
				} 
				return text
			},
			async loadData() {
				this.$api.get({
					url: '/wanlshop/user/adoptList',
					success: res => {
						this.petList = res;

					}
				});
			},
			toDetails(id) {
				// this.$wanlshop.to(`/pages/adopt/petDetails?id=${id}&number=2`)
				this.$wanlshop.to(`/pages/adopt/details?id=${id}&number=2`)
			}

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f6efe9;
	}
	.container {
		padding: 26rpx;
		color: #3d3d3d;
	}

	.card {
		padding: 0rpx  16rpx 24rpx 16rpx;
		margin: 20rpx auto;
			.top {
				margin-bottom: 20rpx;
    			height: 80rpx;
			}
	}

	.pet-list {
		.pet-item {
			// border: 1rpx solid red;
			display: flex;
			gap: 25rpx;
			font-size: 26rpx;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
			padding: 12rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.img-bg {
				width: 160rpx;
				height: 160rpx;
				background-size: cover !important;
				border-radius: 16rpx;
				flex-shrink: 0;
			}

			.details {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				position: relative;

				span {
					// font-weight: bold;
				}

				.status {
					position: absolute;
					top: 8rpx;
					right: 8rpx;
					padding: 4rpx 16rpx;
					border-radius: 8rpx;

					&.yellow {
						color: #ff9500;
						background-color: #ff880015;
					}

					&.red {
						color: #ff0000;
						background-color: #ff000015;
					}

					&.green {
						color: #00cb00;
						background-color: #00910015;
					}
				}

				.info {
					position: absolute;
					bottom: 10rpx;
					right: 8rpx;
					color: #aaa;
					font-size: 24rpx;
				}
			}
		}
	}

	.block {
		display: block;
	}

	.fw {
		font-weight: bold;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ml {
		margin: 2vw 2vw 2vw 0;
	}
</style>